<template>

  <div class="settingWrap" v-title="title">
    <!-- <div class="mask" ></div>  -->
    <!-- 面板区域 -->
    <div class="panel">
      <div class="reveal">
        <div class="left">
          <div class="bg"></div>
        </div>
        <div class="center">
          <div class="panelTitle">
            <span>{{fileName}}</span>
          </div>
          <div class="panelText">
            <span>时间：</span>
            <span v-if="fromWay === 'upload'">{{ time | timeFormat}}</span>
            <span v-else>{{ time | timeFormat1}}</span>
          </div>
          <div class="panelText panelTexlBottom">
            <span>类型： 打印</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 表单区域 -->
    <form v-show="fromWay==='upload'" class="formWrap">
      <!-- 1栏 -->
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <label class="weui-label">打印份数</label>
        </div>
        <div class="weui-cell__bd">
          <div class="threeCount">
            <div class="left" @click="less" :class="{actived:PrintCount>1}"></div>
            <div class="center">
              <input type="text" v-model="PrintCount">
            </div>
            <div class="right" @click="add" :class="{actived:PrintCount>=1}"></div>
          </div>
        </div>
      </div>
      <!-- 2栏 -->
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <div class="weui-div">纸张类型</div>
        </div>
        <div class="weui-cell__bd">
          <div class="radioWrap" for="a3">
            <input type="radio" v-model="PageSize" name="type" class="radio" id="a3" value="A3">
            <label class="btn formBtn" for="a3">A3</label>
          </div>
          <label class="radioWrap">
            <input type="radio" v-model="PageSize" name="type" class="radio" id="a4" value="A4">
            <label for="a4" class="btn formBtn">A4</label>
          </label>
        </div>
      </div>
      <!-- 3栏 -->
      <div class="weui-cell">
        <div class="weui-cell__hd">
          <div class="weui-div">色彩</div>
        </div>
        <div class="weui-cell__bd">
          <div class="radioWrap">
            <input type="radio" v-model="Color" name="color" class="radio" id="blackWhite" value="1">
            <label class="btn formBtn" for="blackWhite">黑白</label>
          </div>
          <label class="radioWrap">
            <input type="radio" v-model="Color" name="color" class="radio" id="color" value="2">
            <label for="color" class="btn formBtn">彩色</label>
          </label>
        </div>
      </div>

        <div class="weui-cell after-right" @click="typePicker" v-if="PageCount != 1">
          <div class="weui-cell__hd">
            <label class="weui-label">双面打印</label>
      </div>
      <div class="weui-cell__bd">
        <input class="weui-input" v-model="PrinterType" type="hidden" :placeholder="typePlaceholder">
        <div class="weui-input">{{PrinterType | doubPage}}</div>
      </div>
    </div>


    
      <!-- </div> -->


    </form>

    <form class="formWrap2" v-show="fromWay==='pick'">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>打印份数</p>
        </div>
        <div class="weui-cell__ft">{{PrintCount}}</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>打印页数</p>
        </div>
        <div class="weui-cell__ft">{{PageCount}}</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>纸张类型</p>
        </div>
        <div class="weui-cell__ft">{{PageSize}}</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>色彩</p>
        </div>
        <div class="weui-cell__ft">{{Color | colorFilter}}</div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <p>双面打印</p>
        </div>
        <div class="weui-cell__ft">{{DuplexType | doubPage}}</div>
      </div>
    </form>

    <!-- 底部提交按钮 -->
    <div class="bottom submit">
      <div class="price">
        <span class="red " v-show="Mode !== 'Free'">￥ {{AllPrice}}</span>
        <br>
        <span>(以实际取件为准)</span>
      </div>
      <div class="right " :class="{disalbed :isDisabled}" @click="submitOrder">
        <span>提交订单</span>
        <img :src="bottomWait" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import { MessageBox } from "mint-ui";

export default {
  data() {
    return {
      log: "",
      title: "打印设置",

      // init数据
      Mode: "",
      fromWay: "",
      item: {},
      fileType: "",
      MediaId: "",

      // 细节数据
      DocNo: "",
      PrintCount: 1,
      Color: 1,
      PageSize: "A4",
      // SimpleDuplexType: false,
      DuplexType: 0,
      PrintCount: 1,
      PageCount: 1,
      AllPrice: "",
      priceArr: [],
      money: "",
      MediaId: "",
      fileName: "",
      prepareId: "",
      PrinterType: 1,
      isDisabled: false,
      // 面板属
      time: new Date(),
      bottomWait: require("./bottomWait.png")
    };
  },
  methods: {
    typePicker() {
      var that = this;
      weui.picker(
        [
          {
            label: "单面",
            value: 1
          },
          {
            label: "双面长边",
            value: 2
          },
          {
            label: "双面短边",
            value: 3
          }
        ],
        {
          className: "custom-classname",
          container: "body",
          defaultValue: [3],
          onChange: function(result) {
            that.PrinterType = result[0].value;
            that.DuplexType = that.PrinterType;
          },
          onConfirm: function(result) {
            that.PrinterType = result[0].value;
            that.DuplexType = that.PrinterType;
            
          },
          id: "singleLinePicker"
        }
      );
    },
    submitOrder() {
      //  this.isDisabled = true
      if (!this.isDisabled) {
        // 防止重复提交
        this.isDisabled = true;
        if (this.fromWay === "upload") {
          // 上传图片而来的
          this.getDocNo();
        } else {
          // 直接取件而来的 有docNO
          if (this.Mode === "Free") {
            // B duan
            this.upData();
          } else {
            // duan
            this.buildOrder(this.DocNo);
          }
        }
      }
    },
    add() {
      this.PrintCount++;
    },
    less() {
      if (this.PrintCount > 1) this.PrintCount--;
    },
    gotoWePay(prepareId) {
      let url = `${this.$url}/user/ParamEncrypt?prepareId=${prepareId}`;
      let that = this;
      this.$axios
        .post(url)
        .then(res => {
          console.log("微信支付签名权限成功");
          console.log(res);
          this.isDisabled = false;
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: res.data.Data.AppId, //公众号名称，由商户传入
              timeStamp: res.data.Data.TimeStamp, //时间戳，自1970年以来的秒数
              nonceStr: res.data.Data.NonceStr, //随机串
              package: res.data.Data.Package,
              signType: res.data.Data.SignType, //微信签名方式：
              paySign: res.data.Data.PaySign //微信签名
            },
            function(res) {
              if (res.err_msg == "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                // 更新文档
                that.upData();
              } else {
                // weui.alert()
              }
            }
          );
        })
        .catch(err => {
          this.isDisabled = false;
          console.log("微信支付签名权限失败");
          //  weui.alert('微信支付签名权限失败')
        });
    },
    upData() {
      this.$router.push("/status");
    },
    init() {
      // 初始化一些数据
      this.Mode = sessionStorage.getItem("Mode"); // B C 端
      this.fromWay = sessionStorage.getItem("fromWay"); // 取件来的 还是上传文件来的
      this.fileType = sessionStorage.getItem("fileType"); // 判断是长传文件 还是上传图片
      this.DocNo = sessionStorage.getItem("DocNo"); // docNo
      this.PageCount = Number(sessionStorage.getItem("PageCount")) || 1; // 判断文件页数
      this.Extension = sessionStorage.getItem("Extension");
      this.MediaId = sessionStorage.getItem("MediaId");
      this.fileName = sessionStorage.getItem("fileName");
      if (this.fromWay === "upload") {
        // 上传文件而来的
        //  C端获取费率
        this.time = new Date();
        if (this.Mode !== "Free") {
          this.configPrice();
        } else {
          // B端这里不操作
        }
      } else if (this.fromWay === "pick") {
        // 取件过来的
        // 我要DOCNO
        this.getinfo(this.DocNo); // 获取打印文件的信息
      }
    },
    getDocNo() {
      let that = this;
      // 初始化数据
      let Extension = this.Extension;
      let DocumentType = this.getDocumentType(Extension);
      let PageSize = this.PageSize;
      let Copies = this.PrintCount;
      let PageCount = this.PageCount || 1;
      this.PageCount = PageCount;
      let MediaId = this.MediaId;
      // let SimpleDuplexType = this.SimpleDuplexType;
      // SimpleDuplexType = this.putSimpleDuplexTypeFixed(SimpleDuplexType);
      let DuplexType = this.DuplexType;

      let ColorType = this.Color;
      let fileName = this.fileName;
      console.log(
        Extension,
        DocumentType,
        PageSize,
        Copies,
        PageCount,
        MediaId,
        // SimpleDuplexType,
        DuplexType,
        ColorType
      );
      // alert("发送pring =false 前");
      let url = `/job/print?DocumentType=${DocumentType}&Extension=${Extension}&PageSize=${PageSize}&Copies=${Copies}&PageCount=${PageCount}&MediaId=${MediaId}&SimpleDuplexType=${DuplexType}&IsPrint=false&ColorType=${ColorType}&Name=${fileName}`;
      axios
        .post(url)
        .then(res => {
          // alert(JSON.stringify(res.data));
          if (res.data.IsSuccess) {
            this.DocNo = res.data.Data.DocNo;
            sessionStorage.setItem("DocNo", res.data.Data.DocNo);
            if (this.Mode !== "Free") {
              this.buildOrder(this.DocNo);
            } else {
              this.upData(this.DocNo);
            }
          } else {
            //setItem;
            weui.alert(res.data.Msg);
            this.isDisabled = false;
          }
        })
        .catch(err => {
          // alert(JSON.stringify(err));
          this.isDisabled = false;
        });
    },
    getDocumentType(Extension) {
      let DocumentType = 6;
      if (this.fileType === "img") {
        // 上传图片过来的
        return 6;
      } else {
        // 上传文件过来的
        if (
          Extension == "docx" ||
          Extension == "doc" ||
          Extension == "docm" ||
          Extension == "dotm"
        ) {
          return 4; // WORD
        } else if (Extension == "jpg" || Extension == "png") {
          return 6; // Imgage
        } else if (Extension == "pdf") {
          return 1; // pdf
        } else if (Extension == "txt") {
          return 5; // text
        } else if (
          Extension == "ppt" ||
          Extension == "pptx" ||
          Extension == "ppsx" ||
          Extension == "potx" ||
          Extension == "pptm"
        ) {
          return 8; // ppt
        } else if (
          Extension == "xls" ||
          Extension == "xlsx" ||
          Extension == "xlsl" ||
          Extension == "xltm" ||
          Extension == "xlsm"
        ) {
          return 7; // ppt
        }
      }
    },
    getinfo(docNo) {
      axios
        .get(`/job/GetInfo?docNo=${docNo}`)
        .then(res => {
          if (res.data.IsSuccess) {
            this.PageSize = res.data.Data.PageSize;
            this.PageCount = res.data.Data.PageCount;
            this.PrintCount = res.data.Data.Copies;
            this.Color = res.data.Data.ColorType;
            // this.SimpleDuplexType = res.data.Data.SimpleDuplexType;
            this.DuplexType = res.data.Data.SimpleDuplexType;
            // this.getSimpleDuplexTypeFixed(this.SimpleDuplexType);
            this.AllPrice = res.data.Data.AllPrice;
            sessionStorage.setItem("AllPrice", this.AllPrice);
            this.fileName = res.data.Data.Name;
            this.time = res.data.Data.AddDateTime;
            if (this.Mode !== "Free") {
              this.configPrice();
            } else {
              // B端这里不操作
            }
          } else {
            weui.alert(res.data.Msg);
          }
        })
        .catch(err => {});
    },
    // getSimpleDuplexTypeFixed(SimpleDuplexType) {
    //   // 获取单双面打印的
    //   if (SimpleDuplexType === 1 || SimpleDuplexType === "1") {
    //     this.SimpleDuplexType = false;
    //   } else {
    //     this.SimpleDuplexType = true;
    //   }
    // },
    // putSimpleDuplexTypeFixed(SimpleDuplexType) {
    //   if (SimpleDuplexType === false) {
    //     return 1;
    //   } else {
    //     return 2;
    //   }
    // },
    buildOrder(docNo) {
      this.$axios
        .post(`${this.$url}/user/Order?docNo=${docNo}`)
        .then(res => {
          if (res.data.IsSuccess) {
            const prepareId = res.data.Data.Prepay_id;
            this.prepareId = prepareId;
            this.AllPrice = res.data.Data.AllPrice;
            sessionStorage.setItem("AllPrice", res.data.Data.AllPrice);
            if (this.Mode !== "Free") {
              // c端付费
              this.gotoWePay(prepareId);
            } else {
              // B端
              this.upData();
            }
          } else {
            var tips = res.data.Msg;
            if (tips === "盒子配置价格为空") {
              tips = `价格未设置，请联系管理员`;
            }
            weui.alert(tips);
            this.isDisabled = false;
          }
        })
        .catch(err => {
            this.isDisabled = false;          
          // alert(JSON.stringify(err));
        });
    },

    configPrice() {
      // alert("price");
      axios
        .post("/job/getprices")
        .then(res => {
          if (res.data.IsSuccess) {
            this.priceArr = res.data.Data;
            this.money = this.getMoney(
              this.priceArr,
              this.Color,
              this.PageSize
            );
            if (!this.money) {
              // 没有获取到费率的时候
              this.isDisabled = true;
            } else {
              this.isDisabled = false;
            }
            this.AllPrice = (this.money *
              this.PageCount *
              this.PrintCount
            ).toFixed(2);
          } else {
            weui.alert(res.data.Msg);
          }
        })
        .catch(err => {});
    },
    getMoney(arr, color = 1, pagesize = "A4") {
      let money = "";
      let arr1 = arr.filter(item => {
        return item.PageSize == pagesize && item.JobType == 1;
      });
      if (arr1.length == 0) {
        money = "";
        return money;
      }
      console.log(arr1);
      let arr2 = arr1.filter(item => {
        return item.ColorType == color;
      });
      if (arr2.length > 0) {
        money = arr2[0].Money;
      } else {
        money = "";
      }
      console.log(money);
      // alert(money)
      return money;
    }
  },
  created() {
    //  this.getConfig()
    this.init();
  },
  filters: {
    doubPage: function(val) {
      switch (val) {
        case 0:
          return "未知";
        case 1:
          return "单面";
        case 2:
          return "双面长边";
        case 3:
          return "双面短边";
      }

      // if (val === 1 || val === false || val === "1") {
      //   return "否";
      // } else {
      //   return "是";
      // }
    },
    colorFilter: function(val) {
      if (val === 1 || val === "1") {
        return "黑白";
      } else {
        return "彩色";
      }
    }
  },
  watch: {
    PrintCount: function(val) {
      if (this.Mode !== "Free" && this.fromWay === "upload") {
        // C端 且上传而来的
        val = parseInt(val);
        val = Number(val);
        this.AllPrice = (this.money * this.PageCount * val).toFixed(2);
      }
    },                   
    PageSize: function(val) {
      if (this.Mode !== "Free" && this.fromWay === "upload") {
        // C端 且上传而来的
        this.money = this.getMoney(this.priceArr, this.Color, val);

        this.AllPrice = (+this.money *
          this.PrintCount *
          this.PageCount
        ).toFixed(2);
      }
    },
    Color: function(val) {
      if (this.Mode !== "Free" && this.fromWay === "upload") {
        // C端 且上传而来的
        this.money = this.getMoney(this.priceArr, val, this.PageSize);

        this.AllPrice = (+this.money *
          this.PrintCount *
          this.PageCount
        ).toFixed(2);
      }
    },
    money: function(val) {
      // 从上传过来的
      if (this.Mode !== "Free" && this.fromWay === "upload") {
        // C端 且上传而来的
        if (!val) {
          this.isDisabled = true;
        } else {
          this.isDisabled = false;
        }
      }
    }
  },
  computed: {}
};
</script>

<style lang='less' scoped>
@import "./setting.less";
</style>


<style lang="less">
.after-right {
  position: relative;

  & ::after {
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #c8c8cd;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: relative;
    top: -2px;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -4px;
  }
}

.weui-switch-cp__input:checked ~ .weui-switch-cp__box,
.weui-switch:checked {
  border-color: #19a4ff;
  background-color: #19a4ff;
}

.weui-cell {
  padding: 11px 15px;
  font-size: 16px;
  .weui-cell__hd {
    height: 28px;
    line-height: 28px;
  }
  .weui-cell__bd {
    height: 28px;
    line-height: 28px;
    text-align: right;
    padding-right: 10px;

    .radioWrap {
      display: inline-block;
      .radio {
        position: absolute;
        visibility: hidden;
      }
      .radio:checked + .formBtn {
        border: 0;
        background: #19a4ff;
        color: #fff;
      }
      .formBtn {
        height: 28px;
        width: 82px;
        border: 1px solid #bfbfbf;
        margin-left: 16px;
        border-radius: 5px;
        font-size: 14px;
        line-height: 28px;
        text-align: center;
        color: #888;
        text-decoration: none;
      }
    }
  }
}

.disalbed {
  background: #9a9a9a;
}
</style>
